<template>
	<view class="container">
		<uni-nav-bar title="首页" fixed statusBar class="navBar">
			<!-- #ifdef MP-WEIXIN -->
			<block slot="left">
				<view class="search">
					<uni-icons type="search" size="20" color="#000" 
						@click="$commonFunc.gotoView(searchUrl)"></uni-icons>
				</view>
			</block>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<block slot="right">
				<view class="search">
					<uni-icons type="search" size="20" color="#000" 
						@click="$commonFunc.gotoView(searchUrl)"></uni-icons>
				</view>
			</block>
			<!-- #endif -->
		</uni-nav-bar>
		<view>
			<top-tabbar id="tab" :barNameList="barNameList" 
								:tabIndex="tabIndex" ></top-tabbar>
			<waterFall v-if="dataList.length > 0" :list="dataList"></waterFall>
		</view>

	</view>
</template>

<script>
	import {
		getArticle
	} from "../../api/article.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseUrl
	} from "@/common/js/request.js"
	import waterFall from '../../components/waterFall/index.vue';
	import topTabbar from "../../components/topTabbar/index.vue";
	export default {
		components: {
			topTabbar,waterFall
		},
		data() {
			return {
				searchUrl:'/search/index/index',
				tabIndex: 0,
				barNameList: [
				// 	{
				// 	name: '关注',
				// 	id: '0'
				// }, {
				// 	name: '推荐',
				// 	id: '1'
				// },
				{
					name: '穿搭',
					id: '2'
				}, {
					name: '彩妆',
					id: '3'
				}, {
					name: '护肤',
					id: '4'
				}, {
					name: '职场',
					id: '5'
				}, {
					name: '美食',
					id: '6'
				}, {
					name: '彩妆',
					id: '7'
				}],
				name: '把我的名字读一遍超级长',
				dataList: [],
				tempUrl: '',
				current: 1,
				size: 8,
				total: 0
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onReachBottom() {
			if (this.dataList.length < this.total) {
				this.current++;
				this.getData();

			} else {
				//this.dataList=  this.dataList.concat(y1);
			}
		},
		onPullDownRefresh() {
			this.current= 1;
			this.size=5;
			this.dataList=[];
			this.getData();
			uni.stopPullDownRefresh();
		},
		onLoad() {
		},
		created() {
			this.tempUrl = this.baseUrl
			this.dataList = [];
			this.getData();
			
		},
		methods: {
			getData() {
				getArticle({
					current: this.current,
					size: this.size
				}).then(res => {
					if (res.code == 200) {
						this.total = res.data.total;
						this.current = res.data.current;
						// this.size = res.data.size;
						this.dataList = [...this.dataList, ...res.data.records]
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		// height: 100vh;
		background-color: #FAFAFA;
		overflow-x: hidden;
	}

	.search {
		vertical-align: middle;
		padding-right: 20rpx;
		//#ifdef MP-WEIXIN
			padding-left: 20rpx;
		// #endif
	}
	#tab {
		width: 100%;
		display: flex;
		white-space: nowrap;
		background-color: #fff;
		margin-bottom: 15rpx;
		border-bottom: 1px solid #eee;
	}
	
</style>
